<template>
	<view class="searchItem">
		<view class="search_top">
			<!-- 搜索框 -->
			<view class="search_top_inp" @click="searchBack">
				<text>{{keyWord}}</text>
				<image src="../../static/images/iconImg/sousuo.png" mode=""></image>
			</view>

			<!-- 筛选列表 -->
			<view class="search_top_list">
				<view @click="zonghe">
					<text>综合</text>
					<Arrow :white="4" :color="bgColor.zonghe" :spin='-90'></Arrow>
				</view>
				<view @click="jiage">
					<text>价格</text>
					<view class="xsj">
						<Arrow :white="4" :color="bgColor.jiageUp" :spin='90' :marbottom="3"></Arrow>
						<Arrow :white="4" :color="bgColor.jiageDown" :spin='-90'></Arrow>
					</view>
				</view>
				<view @click="xiaoliang">
					<text>销量</text>
					<view class="xsj">
						<Arrow :white="4" :color="bgColor.xiaoliangUp" :spin='90' :marbottom="3"></Arrow>
						<Arrow :white="4" :color="bgColor.xiaoliangDown" :spin='-90'></Arrow>
					</view>
				</view>
				<view class="fenlei" @click="listType">
					<image :src="lbysUrl" mode=""></image>
				</view>
				<view class="shaixuan" @click="screen">
					筛选
					<image :src="sxjtfxUrl" mode=""></image>
				</view>

			</view>

		</view>

		<!-- 分类列表 -->
		<view class="search_main" v-if="shopData.length !== 0">
			<view v-if="lbysFlag === false" class="search_main_shop" v-for="item in shopData" :key="item.id"
				@click="detail(item.id)">
				<image :src="item.image_url" mode=""></image>
				<view class="title">
					{{item.name}}
				</view>
				<view class="bottom">
					<view class="bottom_l">
						￥{{item.price}}
					</view>
					<image src="../../static/images/iconImg/gwc.png" mode=""></image>
				</view>
			</view>

			<view v-if="lbysFlag === true" class="lbys2" v-for="item in shopData" :key="item.id"
				@click="detail(item.id)">
				<image :src="item.image_url" mode=""></image>
				<view class="main">
					<view class="title">
						{{item.name}}
					</view>
					<view class="price">
						￥{{item.price}}
					</view>
					<view class="bottom">
						<text>暂无评论</text>
						<image src="../../static/images/iconImg/gwc.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>

		<view class="search_main2" v-else>
			<image src="../../static/images/kong.png" mode=""></image>
		</view>

		<!-- 弹窗 -->
		<view class="popoverOuter" v-if="popoverShow">
			<!-- 价格区间 -->
			<view class="priceQujian">
				<view class="priceQujian_title">
					价格区间
				</view>
				<view class="priceQujian_main">
					<view class="priceQujian_l">
						<input type="number" v-model="priceQujian.lowest">
					</view>
					<view class="priceQujian_c">

					</view>
					<view class="priceQujian_l">
						<input type="text" v-model="priceQujian.heightest">
					</view>
				</view>
			</view>

			<!-- 分类 -->
			<view class="fl">
				<view class="fl_title">
					分类
				</view>
				<view class="fl_main">
					<view v-for="item in goodsCatData" :key="item.id" :class="`fl_item ${item.goods_cat_id
 === tanchuangFenleiId?'active':''}`" @click="fenlei(item)">
						{{item.name}}
					</view>
				</view>
			</view>

			<!-- 品牌 -->
			<view class="pp">
				<view class="fl_title">
					品牌
				</view>
				<view class="fl_main">
					<view v-for="item in brandData" :key="item.id" :class="`fl_item ${item.brand_id
 === tanchuangPinpaiId?'active':''}`" @click="pinpai(item)">
						{{item.name}}
					</view>
				</view>
			</view>

			<!-- 底部按钮 -->
			<view class="footer">
				<view class="close" @click="close">
					关闭
				</view>
				<view class="confirm" @click="confirm">
					确定
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import arrow from '../arrow/arrow.vue'
	import {
		serviceApi
	} from '../../api/paiModule/home.js'
	export default {
		data() {
			return {
				keyWord: '',
				sxjtfxUrl: '../../static/images/iconImg/xjt.png',
				lbysFlag: false, // 列表形式
				lbysUrl: '../../static/images/iconImg/fenlei.png',
				shopData: [],
				popoverShow: false,
				priceQujian: { // 价格区间
					lowest: '',
					heightest: ''
				},
				tanchuangFenlei: '', // 弹窗分类
				tanchuangFenleiId: '', // 弹窗分类Id
				tanchuangPinpai: "", // 弹窗品牌
				tanchuangPinpaiId: "", // 弹窗品牌Id
				brandData: [],
				goodsCatData: [],
				jiagepaixu: false, // 默认升序
				bgColor: {
					zonghe: '#3c3c3c',
					jiageUp: '#9f9f9f',
					jiageDown: '#9f9f9f',
					xiaoliangUp: '#9f9f9f',
					xiaoliangDown: '#9f9f9f'
				}
			};
		},
		onLoad(option) {
			this.keyWord = option.keyWord
			this.getSearchList({
				limit: 10,
				method: "goods.getlist",
				order: "sort asc",
				page: 1,
				// where: "{}",
				where: "{\"search_name\":\"" + option.keyWord + "\"}"
			})
		},
		methods: {
			// 获取搜索结果
			async getSearchList(data) {
				const {
					data: res
				} = await serviceApi(data)

				console.log(res);

				this.shopData = res.data.list
				this.brandData = res.data.filter.brand_ids
				this.goodsCatData = res.data.filter.goods_cat
			},

			// 搜索跳转
			searchBack() {
				console.log(this.keyWord);
				uni.navigateTo({
					url: '/pages/searchPage/searchPage?keyWord=' + this.keyWord
				})
			},

			// 列表展示形式
			listType() {
				if (this.lbysFlag) {
					this.lbysUrl = '../../static/images/iconImg/fenlei.png'
				} else {
					this.lbysUrl = '../../static/images/iconImg/lbys.png'
				}
				this.lbysFlag = !this.lbysFlag
			},

			// 去详情页
			detail(id) {
				uni.navigateTo({
					url: '/pages/goodsDetail/goodsDetail?id=' + id
				})
			},

			// 综合筛选
			zonghe() {

				uni.showLoading({
					title: 'loading'
				})

				this.getSearchList({
					limit: 10,
					method: "goods.getlist",
					order: "sort asc",
					page: 1,
					where: "{\"search_name\":\"" + this.keyWord + "\"}"
				})

				setTimeout(() => {
					uni.hideLoading();
				}, 1000)

			},

			// 价格筛选
			jiage() {
				uni.showLoading({
					title: 'loading'
				})

				if (this.jiagepaixu) {
					// 价格升序
					this.getSearchList({
						limit: 10,
						method: "goods.getlist",
						order: "price asc,sort asc",
						page: 1,
						where: "{\"search_name\":\"" + this.keyWord + "\"}"
					})
					this.jiagepaixu = false

					setTimeout(() => {
						uni.hideLoading();
					}, 1000)
				} else {
					// 价格降序
					this.getSearchList({
						limit: 10,
						method: "goods.getlist",
						order: "price desc,sort asc",
						page: 1,
						where: "{\"search_name\":\"" + this.keyWord + "\"}"
					})
					this.jiagepaixu = true

					setTimeout(() => {
						uni.hideLoading();
					}, 1000)
				}


			},

			// 销量筛选
			xiaoliang() {
				uni.showLoading({
					title: 'loading'
				})

				if (this.jiagepaixu) {
					// 销量升序
					this.getSearchList({
						limit: 10,
						method: "goods.getlist",
						order: "buy_count asc,sort asc",
						page: 1,
						where: "{\"search_name\":\"" + this.keyWord + "\"}"
					})
					this.jiagepaixu = false

					setTimeout(() => {
						uni.hideLoading();
					}, 1000)
				} else {
					// 销量降序
					this.getSearchList({
						limit: 10,
						method: "goods.getlist",
						order: "buy_count desc,sort asc",
						page: 1,
						where: "{\"search_name\":\"" + this.keyWord + "\"}"
					})
					this.jiagepaixu = true

					setTimeout(() => {
						uni.hideLoading();
					}, 1000)
				}
			},

			// 筛选
			screen() {
				if (this.sxjtfxUrl === '../../static/images/iconImg/xjt.png') {
					this.priceQujian.lowest = ''
					this.priceQujian.heightest = ''
					this.popoverShow = true
					this.sxjtfxUrl = '../../static/images/iconImg/sjt.png'
				} else if (this.sxjtfxUrl === '../../static/images/iconImg/sjt.png') {
					this.popoverShow = false
					this.sxjtfxUrl = '../../static/images/iconImg/xjt.png'
				}
			},

			// 清空数据
			clearData() {
				this.tanchuangFenlei = ''
				this.tanchuangFenleiId = ''
				this.tanchuangPinpai = ''
				this.tanchuangPinpaiId = ''
			},

			// 弹窗分类
			fenlei(data) {
				console.log(data);
				this.tanchuangFenleiId = data.goods_cat_id
				this.tanchuangFenlei = data.name

			},

			// 弹窗品牌
			pinpai(data) {
				console.log(data);
				this.tanchuangPinpaiId = data.brand_id,
					this.tanchuangPinpai = data.name
			},

			// 关闭弹窗
			close() {
				this.popoverShow = false
				this.sxjtfxUrl = '../../static/images/iconImg/xjt.png'

				this.clearData()
			},

			// 弹窗确定
			confirm() {
				this.popoverShow = false
				this.sxjtfxUrl = '../../static/images/iconImg/xjt.png'

				const hightPrice = this.priceQujian.heightest === '' ? '0' : this.priceQujian.heightest
				const lowPrice = this.priceQujian.lowest === '' ? '0' : this.priceQujian.lowest

				console.log({
					hightPrice,
					lowPrice,
					name: this.keyWord,
					cat_id: this.tanchuangFenleiId,
					brand_id: this.tanchuangPinpaiId
				});

				this.getSearchList({
					limit: 10,
					method: "goods.getlist",
					order: "buy_count desc,sort asc",
					page: 1,
					where: `{"search_name":"${this.keyWord}","cat_id":${this.tanchuangFenleiId},"brand_id":"${this.tanchuangPinpaiId}","label_id":"","price_f":"${lowPrice}","price_t":"${hightPrice}"
					}`
				})

				this.clearData()
			},

		},
		components: {
			Arrow: arrow,
		},
	}
</script>

<style lang="scss" scoped>
	.searchItem {
		background-color: #fff;
		width: 100%;
		height: 93.3vh;
		overflow: hidden;
		position: relative;

		.search_top {
			width: 96%;
			margin: 0 auto;

			.search_top_inp {
				height: 36px;
				width: 100%;
				border-radius: 100px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 10px;
				background-color: #e9e9e9;

				text {
					font-size: 14px;
					color: #818181;
				}

				image {
					width: 20px;
					height: 20px;
				}
			}

			.search_top_list {
				display: flex;
				align-items: center;
				padding: 16px 0;
				padding-left: 6px;

				&>view {
					width: 16%;
					display: flex;
					align-items: center;
					margin-right: 10px;
					padding-left: 6px;

					text {
						font-size: 14px;
						margin-right: 3px;
					}

					.xsj {
						Arrow {
							&:first-child {
								margin-top: 3px;
							}
						}
					}
				}

				.fenlei {
					image {
						width: 16px;
						height: 16px;
						margin-left: 12px
					}
				}

				.shaixuan {
					font-size: 14px;

					image {
						margin-top: 3px;
						margin-left: 2px;
						width: 12px;
						height: 12px;
					}
				}

			}

		}

		.search_main {
			width: 96%;
			height: 80vh;
			padding-left: 10px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			overflow-y: scroll;
			box-sizing: border-box;

			.search_main_shop {
				width: 48%;
				margin-bottom: 40px;

				&>image {
					width: 100%;
					height: 200px;
				}

				.title {
					line-height: 16px;
					font-size: 12px;
					overflow-wrap: anywhere;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.bottom {
					margin-top: 3px;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.bottom_l {
						font-size: 12px;
						color: #d05454;
					}

					image {
						width: 20px;
						height: 20px;
					}
				}
			}
		}

		.search_main2 {
			width: 160px;
			height: 160px;
			margin: 0 auto;
			margin-top: 100px;

			image {
				width: 100%;
				height: 100%;
				margin: 0 auto;
			}
		}

		.lbys2 {
			width: 100%;
			height: 140px;
			display: flex;
			padding-left: 10px;
			margin-bottom: 20px;

			&>image {
				width: 30%;
				height: 100%;
			}

			.main {
				width: 70%;
				padding: 10px;
				padding-right: 20px;

				.title {
					font-size: 14px;
					overflow-wrap: anywhere;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.price {
					color: #f47878;
					font-weight: bold;
					line-height: 30px;
				}

				.bottom {
					display: flex;
					align-items: center;
					justify-content: space-between;

					text {
						font-size: 12px;
						color: #9e9e9e;
					}

					image {
						width: 20px;
						height: 20px;
					}
				}
			}
		}

		.popoverOuter {
			width: 100%;
			background-color: #fff;
			position: fixed;
			top: 130px;
			bottom: 0;
			padding: 10px;

			.priceQujian {
				.priceQujian_title {
					font-size: 13px;
				}

				.priceQujian_main {
					margin-top: 12px;
					display: flex;
					align-items: center;
				}

				.priceQujian_l {
					width: 80px;
					height: 30px;
					background-color: #f1f1f1;

					input {
						width: 100%;
						height: 100%;
						text-align: center;
					}
				}

				.priceQujian_c {
					height: 1px;
					width: 20px;
					background-color: #b6b6b6;
					margin: 0 10px;
				}
			}

			.pp,
			.fl {
				font-size: 13px;
				margin-top: 20px;

				.fl_title {
					margin-bottom: 20px;
				}

				.fl_main {
					width: 100%;
					display: flex;
					align-items: center;
					flex: 1;

					.fl_item {
						background-color: #f1f1f1;
						padding: 10px;
						margin-right: 10px;
					}

					.active {
						background-color: #ff7159;
						color: #fff
					}
				}

			}

			.footer {
				height: 46px;
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				display: flex;
				align-items: center;

				.confirm,
				.close {
					width: 50%;
					height: 100%;
					background-color: #eeeeee;
					text-align: center;
					line-height: 50px;
					font-size: 13px;
				}

				.confirm {
					background-color: #333333;
					color: #fff
				}
			}

		}
	}
</style>
